import { defineComponent, reactive, watch } from "vue";
import { useRouter } from 'vue-router';
import { ElMessageBox, ElNotification } from 'element-plus'
import { useStore } from "vuex";
import { email } from '../../../public/app-config.json'
import recruit from '../../../public/recruit.json';
import './index.less';


export default defineComponent({
    name: 'Detail',
    setup() {
        const router = useRouter();
        const store = useStore();
        const state = reactive({
            clientWidth: store.getters["app/getClientWidth"],
            recruitData: [].concat(...(Object.keys(recruit).map(key => recruit[key]))).filter(item => item.id == router.currentRoute.value.query.id)[0],
        });
        watch(() => store.state.app.clientWidth, (clientWidth) => {
            state.clientWidth = clientWidth;
        });
        const handleOpen = async () => {
            try {
                console.log(state.clientWidth);
                const { value } = await ElMessageBox.prompt('填写姓名和专业后，通过邮箱发送简历', '个人信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[^x00-xff]{2,3}\-[^x00-xff]{2,10}$/,
                    inputErrorMessage: '请按照 “姓名-专业” 格式输入',
                    showClose: false,
                    closeOnClickModal: false,
                    customStyle: {
                        width: state.clientWidth >= 600 ? '400px' : '90%'
                    }
                });
                console.log(email);
                location.href = `mailto:${email}?subject=${value}-${state.recruitData.position}-${state.recruitData.type}`;

                ElNotification({
                    title: '提示',
                    message: `如果没有跳转邮箱，请发送简历到 ${email}`,
                    type: 'warning',
                    duration: 0
                });

            } catch (error) {
                console.error(error);
            }
        };
        return {
            router,
            state,
            handleOpen
        }
    },
    render() {
        const { position, type, salaryLeast, salaryMost, addr, experience, education, responsibility, jobRequirements, department, date } = this.state.recruitData;
        return <div class="detail w-full h-full" ref="detail">
            <el-descriptions class="w-full" column={1} border v-slots={{
                title: () => <div class="w-full flex justify-between items-center">
                    <h2 class="text-lg font-semibold">{position}</h2>
                    <div>
                        <el-tooltip
                            effect="dark"
                            content="两轮线上面试"
                            placement="top"
                        >
                            <el-button type="primary" size="small" onClick={() => this.handleOpen()}>投简历</el-button>
                        </el-tooltip>
                        <el-popconfirm title="投简历了嘛?" confirmButtonText="确定" cancelButtonText="取消" confirmButtonType="primary" cancelButtonType="default" onConfirm={() => this.router.back()} v-slots={{ reference: () => <el-button type="danger" size="small">返回</el-button> }}>
                        </el-popconfirm>
                    </div>
                </div>
            }}>
                <el-descriptions-item label="工作部门">{department}</el-descriptions-item>
                <el-descriptions-item label="学历要求">{education}</el-descriptions-item>
                <el-descriptions-item label="经验要求">{experience}</el-descriptions-item>
                <el-descriptions-item label="招聘类型">{type}</el-descriptions-item>
                <el-descriptions-item label="工作地点">
                    {addr.join('、')}
                </el-descriptions-item>
                <el-descriptions-item label="薪资范围">
                    {`${salaryLeast}k - ${salaryMost}k`}
                </el-descriptions-item>
                <el-descriptions-item label="岗位职责">
                    {responsibility.split('\n').map(item => <p>{item}</p>)}
                </el-descriptions-item>
                <el-descriptions-item label="任职要求">
                    {jobRequirements.split('\n').map(item => <p>{item}</p>)}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    }
})